<template>
  <div id="home">
    <el-container class="page-container">
      <el-header>
        <HomeHeader></HomeHeader>
      </el-header>
      <el-container>
        <!-- 68px  -->
        <el-aside width="200px">
          <!-- 主页的左侧导航栏 -->
          <AsideMenu></AsideMenu>
        </el-aside>
        <el-main>
          <HomeBreadcrumb></HomeBreadcrumb>
          <RouterView></RouterView>
          <!-- <ChinaCharts></ChinaCharts> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import AsideMenu from '../components/home/AsideMenu.vue'
import HomeHeader from '../components/home/HomeHeader.vue'
import HomeBreadcrumb from '../components/home/HomeBreadcrumb.vue'
// import ChinaCharts from '../components/chart/ChinaChartns.vue';
// const roleId = sessionStorage.getItem('roleId')
</script>

<style scoped lang="scss">
//lang="scss"支持css嵌套
#home {
  width: 100%;
  height: 100%;

  // 修改背景颜色为浅蓝色
  .page-container {
    width: 100%;
    height: 100%;
    background-color: #add8e6; // 浅蓝色

    .el-main {
      background-color: #e0f7fa; // 更浅的蓝色
      padding: 15px;
    }

    .el-header {
      height: 68px;
      background-color: #87ceeb; // 天蓝色
    }

    .el-aside {
      background-color: #b0e0e6; // 粉蓝色
      width: 250px;
    }
  }
}
</style>
